<template>
    <div class="my-account">
        <div class="account-box f f-col f-ac" v-html="content.value"></div>
    </div>
</template>

<script>
    import {
        getxy
    } from "@/utils/home/index.js";
    export default {
        data() {
            return {
                content: {}, 
            };
        },

        mounted() {
            this.getXy();
        },

        methods: {
             // 获取数据
             getXy() {
                let that = this
                getxy().then((response) => {  
                    that.content = response.data.list.filter(item => item.name == 'ysxy')[0]
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .my-account {
        width: 100%;
        min-height: 483px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 20px;
        box-shadow: 0px 3px 10px rgba(217, 217, 217, 0.5);

        .account-box {
            width: 100%;
            position: relative;

            .account-from {
                width: 682px;
                height: 148px;

                .from-left {
                    width: 148px;
                    height: 148px;
                    margin-right: 30px;
                }

                .from-right {
                    height: 100%;

                    .from-label {
                        font-size: 14px;
                        color: #333;
                        font-weight: 600;
                    }

                    .from-time {
                        font-size: 12px;
                        color: #b2b2b2;
                    }

                    .from-row {
                        .row-title {
                            width: auto;
                            color: #333;
                            font-size: 14px;
                            text-align: right;
                        }
                    }
                }
            }

            .form-btn {
                user-select: none;
                position: absolute;
                width: 214px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                border-radius: 5px;
                color: #fff;
                font-size: 14px;
                font-weight: 600;
                background-color: #0a4ab6;
                top: 190px;
                right: 232px;

                &:hover {
                    cursor: pointer;
                    background-color: #0e54ce;
                }

                &:active {
                    background-color: #0a4ab6;
                }
            }
        }
    }

    :deep(.el-tabs__item) {
        color: #909090;
    }

    :deep(.el-tabs__nav .is-active) {
        color: #466ec5;
    }

    :deep(.el-tabs__active-bar) {
        background-color: #466ec5;
    }

    :deep(.el-tabs__nav-wrap::after) {
        display: none;
    }
</style>